<template>
  <!-- 首页组件 -->
  <div id="home">
    <!-- 搜索区 -->
    <searchBar :value="'0'"/>
    <!-- 标签区域 -->
    <van-tabs v-model="active" swipeable v-tab>
      <van-tab title="首页" key="0">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="contain">
            <!-- 轮播 -->
            <van-swipe class="swiper" :autoplay="3000">
              <van-swipe-item v-for="(image, index) in index_adv" :key="index">
                <img style="width: 100%;" v-lazy="image.adv_url" />
              </van-swipe-item>
            </van-swipe>

            <van-row class="col-2">
              <van-col class="row-2 nav_shortcut" span="6" v-for="(v,index) in icon" :key='v.id'>
                <a @click.stop="redirect('/cate')">
                  <img :src="path+'icon/'+icon[index]+'.png'"/>
                  <span>{{bageTitle[index]}}</span>
                </a>
              </van-col>
            </van-row>

            <van-row class="goodslist">
              <van-col class="goods" v-for="(goods,index) in recommend_list" :key='goods.goods_id' span="12">
                <div class="goods_thumb">
                <img v-lazy="goods.goods_image" name="adapter" @click.stop="redirect('/goods/'+goods.goods_id)" />
                </div>
                <h4 class="goods_name" @click.stop="redirect('/goods/'+goods.goods_id)">{{goods.goods_name}}</h4>
              </van-col>
            </van-row>
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab v-for="category in header_categories"
        :title="category.gc_name"
        :key="category.gc_id"
        class="tab"
      >
        <div class="contain">
          <active :cateID="category.gc_id" />
        </div>

      </van-tab>
    </van-tabs>
    <!-- tabBar -->
    <van-tabbar v-model="tabarActive">
      <van-tabbar-item icon="wap-home" @click="redirect('/')">首页</van-tabbar-item>
      <!--<van-tabbar-item icon="apps-o" dot  @click="redirect('/cate')" >分类</van-tabbar-item>-->
      <van-tabbar-item icon="shopping-cart" :info="cartInfo" url="redirect('/shoppingCart')">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" dot url="redirect('/me')">我的</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>
  import { mapState,mapActions,mapGetters } from 'vuex';
  import Active from './active';
  import SearchBar from './searchBar';
  export default {
    name: 'home',
    components:{
      Active,
      SearchBar,
    },
    data() {
      return {
        tabarActive:0,
        value:null,
        active:0,
        isLoading: false,
        path:'../../static/images/',
        list:[],
        imageList:[],
        cartInfo:1,
        // activeTitle:null,
        // days:null,
        disabled:false,
        // broadcast:null,
        // show:true,
        count: 0,

        header_categories:[],
        index_adv:[],
        recommend_list:[]
      }
    },
    computed: {
      ...mapState({
        // title: state => state.home.tab.title,
        icon: state => state.home.badge.icon,
        bageTitle: state => state.home.badge.title,
        actives: state => state.active.home.title,
        src : state => state.home.lunbo.src,
        activeTitle: state => state.active.home.activeTitle,
        days: state => state.active.home.days,
        broadcast: state => state.home.broadcast,
        shop_info: state => state.home.shop_info,
        my_info: state => state.home.my_info,
        show: state => state.home.show,
      }),
      ...mapGetters(['bc_notshow','search_show']),
    },
    methods: {
      ...mapActions([
        'searchA','changeTabbar'
      ]),
      search() {
        this.$router.push('/search');
      },
      redirect(url){
        console.log(url);
        this.$router.push(url);
      },


      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 500);
      },
      // 瀑布流方法
      loadMore() {
        this.disabled = true;
        setTimeout(() => {
          for (let i = 0; i < 5; i++) {
            this.imageList.push(this.imageList[i]);
            this.activeTitle.push(this.activeTitle[i]);
            this.days.push(this.days[i]);
          }
          this.disabled = false;
        }, 200);
      },
    },
    watch: {

    },
    directives: {
      //瀑布流
      // WaterfallLower: Waterfall('lower'),
      tab:{
        inserted(el) {
          //绑定tab样式

        }
      },
      //tabBar 消息通知指令
      // infos:{
      //   inserted(el,obj) {
      //     console.log(obj.value);
      //     const info = el.childNodes[0].childNodes[1];
      //     info.innerText = obj.value;
      //   }
      // }

    },
    beforeCreate() {
      this.$fetch("/index/index").then((res)=>{

        if(res.code == 1){
          this.header_categories = res.data.header_categories;
          this.index_adv = res.data.index_adv;
          this.recommend_list = res.data.recommend_list;
           console.log(res.data.header_categories)
        }
      });
    },
    created() {
    }
  }
</script>

<style lang="less" scoped>
  @import url('../assets/css/home.less');
</style>

